<template>
  <div class="Home">
    <h1>Home</h1>
    <div>
      <p>store里数据改变：{{ appStore.num }}</p>
      <button @click="add">add</button>
    </div>
    <div>
      <p>调用接口</p>
      <button @click="getData">getData</button>
    </div>
    <div>
      <p>
        vue3 响应式数据： 姓名:{{ data.name }} 年龄:{{ data.age }} 爱好:{{
          data.like
        }}
      </p>
      <button @click="changeName">changeName</button>
      <button @click="changeAge">changeAge</button>
      <button @click="changeLike">changeLike</button>
    </div>
  </div>
  <HelloWorld :num="num" :str="str" :bool="bool" @changeNum="changeNum"></HelloWorld>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
// 引入store
import { useAppStore } from "@/store/app";
// 引入组件
import HelloWorld from "@/components/HelloWorld.vue";

// 获取全局环境 开发或者生产
console.log("全局环境", import.meta.env);

// 获取store - start
// store - app
const appStore = useAppStore();
// 获取store - end

// 变量 - start
// 建议使用reactive来代替ref
// 首先ref只能定义基础类型响应式数据，reactive只能定义对象类型响应式数据。ref在实际能定义对象类型，是因为调用了reactive。
// 因为ref是对象，使用改变其值的时候必须.value，才能赋值，reactive不需要，而且reactive进行的是深层次监听。
// 所以写起来比较别扭，推荐用下面类似于vue2的写法，用reactive定义一个data，把data暴露出去
// 使用时，直接data.XX即可。

// 2023.03.15 还是不建议这样使用，没比较强行整成vue2的写法，不然会混淆vue2和vue3的区别，所以基础类型还是尽量用ref
const data = reactive({
  name: "小李",
  age: 25,
  like: ["游戏", "看书"],
});
// 变量 - end

// 变量 ref 定义
const num = ref(0);
const str = ref("");
const bool = ref(true);

// 直接在外面执行也行，相当于beforeCreate与created
// 挂载后
onMounted(() => {
  init();
})

// 方法 - start

// 初始化
const init = (): void => {
  // ref变量的赋值
  num.value = 1;
  str.value = "字符串";
  bool.value = false;
}
// 改变name
const changeName = (): void => {
  data.name = "小红";
};
// 改变年龄
const changeAge = (): void => {
  data.age++;
};
// 改变爱好
const changeLike = (): void => {
  data.like[1] = "小说";
};
// store里数据改变
const add = (): void => {
  appStore.num++;
};
// 调用接口 数据请求写在vuex里面
const getData = (): void => {
  let params = {};
  appStore.getData(params).then((data): void => {
    console.log("调用接口", data.list);
  }).catch(() => {
    console.log("请求出错");
  }).finally(() => {
    console.log("请求结束");
  });
};
// 接受子组件的事件 changeNum
const changeNum = () => {
  num.value++;
}
// 方法 - end
</script>

<style lang="less" scoped>
.Home {
  p {
    font-size: 20px;
  }
}
</style>